<template>
    <div class="easybrokenlist">
        <button @click="toShowBook()">图册</button>
        <ul class="numUl">
            <li v-for="(item,key) in menuList" :key="key" @click="toOperatemanul(key)">
                <a >
                    <span class="liId">{{item.id}}</span>
                    <span class="liright">
                        <span class="liName">{{item.systemName.replace(/[^\u4e00-\u9fa5]/gi,"")}}</span>
                        <span class="liTxt">{{item.systemName.replace(/[^a-z]+/ig,"")}}</span>
                    </span>
                    <span style="clear: both"></span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    import { getPartMenu} from '../url'
    import {ERROR_OK} from "../constVar"

    export default {
        data(){
            return{
                menuList:[],
                hostId:1,
                nameOne:[],
                nameTwo:[],
            }
        },
        methods:{
            async _getPartMenu(hostId) {
                let {status,data} = await getPartMenu(hostId);
                if(status === ERROR_OK){
                    this.menuList = data;
                }else {
                    this.menuList = [];
                }
            },
            toShowBook(){
                this.$router.push({name:'showbook',query:{id:this.hostId}})
            },
            toOperatemanul(key){
                this.$router.push({name:'operatemanual',query:{hostId:this.hostId,id:this.menuList[key].id}});
            }
        },
        created(){
            this.hostId = this.$route.query.id || 1;
            this._getPartMenu(this.hostId);
        }
    }
</script>

<style scoped lang="scss">
    .easybrokenlist{
        z-index: 1;
        button{
            z-index: 99;
            margin-top: 20px;
            line-height: 1;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            cursor: pointer;
            border: 1px solid #1890ff;
            font-size: 14px;
            border-radius: 4px;
            height: 32px;
            user-select: none;
            color: #fff;
            background-color: #1890ff;
            padding: 0 50px;
            outline: none;
            &:active{
                transition: all 1s linear;
                background-color: #2c3e50;
            }
        }
        .numUl{
            margin-top: 20px;
            text-align: left;
            border-top: 2px dashed #ddd;
            li{
                height: 60px;
                list-style: none;
                margin-bottom: 2px;
                box-shadow: 2px 2px 2px #ddd;
                cursor: pointer;
                span{display: block;}
                a{
                    display: block;
                    text-decoration: none;
                    width: 100%;
                    height: 60px;
                    .liId{
                        font-size: 40px;
                        float: left;
                        margin: 5px 0 0 10px;
                        color: rgba(0, 0, 0, 0.7);
                    }
                    .liright{
                        float: right;
                        width: 90%;
                        line-height: 21px;
                        color:rgba(0,0,0,0.9);
                        margin-top: 10px;
                        .liName{
                        }
                    }
                }
                a:hover{
                    transition: all .4s linear;
                    background: #2c3e50;
                    span{color: #fffdef;}
                }
            }
        }
    }
</style>